import React, {Component} from 'react';
import {
  View,
  Text,
  StatusBar,
  SafeAreaView,
  StyleSheet,
  Alert,
} from 'react-native';
import {ListItem} from 'react-native-elements';
import {NavigationActions, StackActions} from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({routeName: 'login'})],
});

export default class MyPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
    this.getUser();
  }

  getUser() {
    storage
      .load({
        key: 'user',
      })
      .then(user => {
        this.setState({user});
      });
  }

  removeTokenAndLogout() {
    storage
      .remove({
        key: 'token',
      })
      .then(res => {
        this.props.navigation.dispatch(resetAction);
      });
  }

  logout() {
    Alert.alert('退出', '确定退出吗？', [
      {
        text: '取消',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      {text: '确定', onPress: () => this.removeTokenAndLogout()},
    ]);
  }

  render() {
    const {user} = this.state;
    return (
      <View>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <View style={myStyles.myTop}>
            <Text style={myStyles.user}>{user.account || ''}</Text>
          </View>
          <ListItem
            title="关于我们"
            leftIcon={{name: 'person', color: '#4784FE'}}
            bottomDivider
            chevron
          />
          <ListItem
            title="清理缓存"
            leftIcon={{name: 'clear-all', color: '#E9A763'}}
            bottomDivider
          />
          <ListItem
            title="版本更新"
            leftIcon={{name: 'beenhere', color: '#49B454'}}
            bottomDivider
            chevron
          />
          <ListItem
            title="退出"
            leftIcon={{name: 'power-settings-new'}}
            bottomDivider
            chevron
            onPress={this.logout.bind(this)}
          />
          {/* <Button title="退出" onPress={}></Button> */}
        </SafeAreaView>
      </View>
    );
  }
}

const myStyles = StyleSheet.create({
  myTop: {
    padding: 20,
    backgroundColor: '#4784FE',
  },
  user: {
    color: '#fff',
    fontSize: 20,
    fontWeight: ('bold', '700'),
    lineHeight: 50,
  },
});
